/* 用来保存多个页面之间公共的CSS样式代码 */
/* 通用公共样式 */
/* 给所有标签自带的内外边距重置为0 */
* {
    padding: 0;
    margin: 0;
}

/* 去掉所有图片底部的留白 */
img {
    vertical-align: middle;
}

/* 网页核心内容的左右居中 */
.center {
    width: 1160px;
    /* 左右居中 */
    margin: 0 auto;
    /* 内边框 */
    /* outline: 1px solid red; */
}

/* 网页头部 */
header {
    height: 100px;
}

.header-center {
    height: 100px;
    /* 启用弹性布局（内部子标签横向排列） */
    display: flex;
    /* 两端对齐：一左一右 */
    justify-content: space-between;
    /* 上下居中 */
    align-items: center;
}

.logo {
    width: 173px;
    height: 60px;
}

.toolbar {
    /* width: 340px; */
    height: 25px;
    display: flex;
    align-items: center;
}

.toolbar>a {
    color: #333;
    font-size: 14px;
    text-decoration: none;
    padding: 0 10px;
}

.toolbar>a:first-child {
    border-right: 1px solid black;
}

.toolbar img {
    width: 20px;
    height: 20px;
}

.mine-icon {
    margin: 0 20px;
}

.search-box {
    border-bottom: 1px solid #333;
    padding-bottom: 3px;
    margin-left: 10px;
}

.search-box>input {
    border: none;
    outline: none;
    width: 140px;
}

/* 网页导航菜单 */
nav {
    height: 40px;
    position: relative;
}
.menu {
    width: 650px;
    height: 40px;
    /* 块级标签左右居中 */
    margin: 0 auto;
    /* 子标签横向排列 */
    display: flex;
    /* 横向排列布局 */
    justify-content: space-between;
    /* 上下排列居中 */
    /* align-items: center; */
    /* 去掉ul和li的小圆点 */
    list-style: none;
}
.menu a {
    color: #333;
    font-size: 14px;
    /* 去掉下划线 */
    text-decoration: none;
}
.menu>li {
    height: 37px;
    /* 行高 */
    /* 单行文本上下居中，可以将行高设置成盒子的高度 */
    line-height: 37px;
}
.active {
    border-bottom: 3px solid #c10000;
}
/* 二级菜单 */
.sub-menu {
    width: 100%;
    height: 280px;
    background-color: #fff;
    display: none;
    position: absolute;
    left: 0;
}

.active:hover .sub-menu {
    /* 覆盖掉原本的display: none，隐藏失效 */
    display: block;
}

/* 广告图 */
.banner {
    height: 500px;
    background-color: #444;
    background-image: url('../images/banner1.jpg');
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center;
}

/* 面包屑 */
.breadcrumb {
    border-bottom: 1px solid #dbdbdb;
}

.breadcrumb>.center {
    height: 42px;
    line-height: 42px;
    font-size: 14px;
}

/* nth-child(2) 获取指定位置的子标签 */
.breadcrumb span:nth-child(2) {
    margin: 0 20px;
}

/* 四个服务 */
.service {
    height: 112px;
    border-top: 1px solid #dbdbdb;
}

.service>.center {
    height: 112px;
    /* 让内部子标签横向排列 */
    display: flex;
    /* 上下居中 */
    align-items: center;
}

.service-item {
    width: 290px;
    height: 53px;
    text-align: center;
    border-right: 1px solid #dbdbdb;
}

.service-item>img {
    margin-right: 5px;
}

/* 找到 service 内部的最后一个service-item*/
.service .service-item:last-child {
    border-right: none;
}

/* 网页底部 */
footer {
    height: 87px;
    background-color: black;
}

footer>.center {
    height: 100%;
    /* 弹性盒子：子标签横向排列 */
    display: flex;
    /* 改变主轴方向:让子标签纵向排列 */
    flex-direction: column;
    /* 上下居中（因为主轴方向发生了改变） */
    justify-content: center;
    /* 左右居中 */
    align-items: center;
}

footer p {
    /* 文字颜色 */
    color: white;
    /* 文字大小 */
    font-size: 14px;
    /* 行高 */
    line-height: 24px;
}

/* 右侧固定小导航 */
.right-nav {
    width: 50px;
    position: fixed;
    right: 20px;
    top: 310px;
}

.right-nav>div {
    width: 50px;
    height: 50px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.right-nav>div>img {
    width: 20px;
    height: 20px;
}

.right-nav>.cart {
    position: relative;
}

.right-nav .badge {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    line-height: 14px;
    text-align: center;
    font-size: 10px;
    color: #fff;
    background-color: #c10000;
    position: absolute;
    top: -7px;
    right: -7px;
}